if timings.largestContentfulPaint
  a#largestContentfulPaint
  h3 Largest Contentful Paint
  p When in time the page main content is rendered (collected using the Largest Contentful Paint API). Read more about 
    a(href='https://web.dev/largest-contentful-paint') Largest Contentful Paint
    | .
  .row
    .one-half.column
        table
            if timings.largestContentfulPaint.tagName 
              tr
                td 
                  b Element type
                td #{timings.largestContentfulPaint.tagName}
            if timings.largestContentfulPaint.tag 
              tr
                td 
                  b Element/tag
                td.url.pagesurl #{timings.largestContentfulPaint.tag}
            tr
              td 
                b Render time 
              td #{h.time.ms(timings.largestContentfulPaint.renderTime)}
            tr
              td 
                b Element render delay
              td #{h.time.ms(timings.largestContentfulPaint.elementRenderDelay)}
            tr
              td 
                b TTFB
              td #{h.time.ms(timings.largestContentfulPaint.ttfb)}
            tr
              td 
                b Resource delay
              td #{h.time.ms(timings.largestContentfulPaint.resourceLoadDelay)}
            tr
              td 
                b Resource load duration
              td #{h.time.ms(timings.largestContentfulPaint.resourceLoadDuration)}
            if renderBlocking && renderBlocking.recalculateStyle.beforeLCP
              tr 
                td
                  b Elements that needed recalculate style before LCP
                td #{renderBlocking.recalculateStyle.beforeLCP.elements}    
              tr
                td 
                  b Time spent in recalculate style before LCP
                td #{h.time.ms(renderBlocking.recalculateStyle.beforeLCP.durationInMillis)}  

            if timings.largestContentfulPaint.id !== ''
              tr 
                td 
                  b Element id
                td #{timings.largestContentfulPaint.id}
            tr
              td 
                b Load time
              td #{h.time.ms(timings.largestContentfulPaint.loadTime)}
            if timings.largestContentfulPaint.url !== ''  
              tr 
                td 
                  b URL 
                td 
                  a(href=timings.largestContentfulPaint.url) #{h.shortAsset(timings.largestContentfulPaint.url)}
            if timings.largestContentfulPaint.size
              tr 
                td 
                  b Size (width*height)
                td #{timings.largestContentfulPaint.size}
            tr
              td(colspan='2')
               b DOM path
            tr
              td.url.pagesurl(colspan='2')
                #{timings.largestContentfulPaint.domPath}
    .one-half.column
      - const screenshotNo = medianRun ? medianRun.runIndex : (Number(runIndex) + 1)
      - const screenshotName = 'data/screenshots/' + screenshotNo + '/largestContentfulPaint.' + screenShotType
      a(href=screenshotName)
        img.screenshot(src=screenshotName, alt='LCP', style='max-width:100%; height: auto')
      p.small The largest contentful paint is highlighted in the image. If no element is highlighted the element was removed before the screenshot or the LCP API couldn't find the element.
      if timings.largestContentfulPaint.url !== ''
        p.small The Largest Contentful Paint API highlighted this image as a part of the LCP.  
        a(href=timings.largestContentfulPaint.url) 
          img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='max-width:100%; height: auto')
